<template>
  <div class="login">
    <LoginHeader>
      <el-form slot="container" ref="form"    label-position="left"   :rules="rules" :model="form">
        <div class="title">
          <h3>账号密码登陆</h3>
        </div>
        <!-- 账号 -->
        <el-form-item  prop="username">
           <el-input type="text" v-model="form.username" auto-complete="off" placeholder="账号">
            <i slot="prefix" class="fa fa-user-o"></i>
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item  prop="pwd">
          <el-input type="pwd" v-model="form.pwd" auto-complete="off" placeholder="密码">
            <i slot="prefix" class="fa fa-lock"></i>
          </el-input>
        </el-form-item>
        <!-- 登录button -->
        <el-form-item>
          <el-button
            :loading="isLogin"
            @click.native.prevent="submitForm('form')"
            type="primary"
            style="width:100%;"
          >登录</el-button>
        </el-form-item>
        <!-- 7天登录和忘记密码 -->
        <el-form-item>
          <el-checkbox v-model="form.autoLogin" :checked="form.autoLogin">7天内自动登录</el-checkbox>
          <el-button @click="$router.push('/password')" type="text" class="forget">忘记密码？</el-button>
        </el-form-item>
      </el-form>
    </LoginHeader>
  </div>
</template>
<script lang="ts">
import { Component, Vue ,Provide} from "vue-property-decorator";
import LoginHeader from "./LoginHeader.vue";
import {
  State,
  Getter,
  Action,
  Mutation,
  namespace
} from 'vuex-class'
@Component({
  components: {
    LoginHeader
  }
})
export default class Login extends Vue {
    @Action("setUser") setUser: any;
  //在这里我们没有使用 data 声明数据 而是使用了@Provide
    @Provide() rules = {
         username: [
            { required: true, message: '请输入账号', trigger: 'blur'  }
          ],
          pwd: [
            { required: true, message: '请选择密码', trigger: 'blur'  }
          ],
    };
    @Provide() form:{
       username:String,
       pwd:String,
        autoLogin: boolean;
    } =  {
       username:"",
       pwd:"",
       autoLogin:true
    };
    @Provide() isLogin: boolean = false;
    //在方法中我们传入参数 就要对它进行类型的限制 这个ts 要求的
    submitForm(formName:any) {
        (this.$refs[formName] as any).validate((valid:boolean) => {
          if (valid) {
            // alert('submit!');
            this.isLogin = true;
            (this as  any).$axios.post('/api/users/login',this.form).then((res:any)=>{
                 console.log(res);
                 localStorage.setItem("tsToken", res.data.token);
                 //  sessionStorage.setItem("tsToken", res.data.token);
                 //调用action 储存数据到vuex 
                 this.setUser(res.data.token);

                 this.$router.push("/");
                 
            }).catch((error:any)=>{
                   this.isLogin = false;
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}

i {
  font-size: 14px;
  margin-left: 8px;
}
.forget {
  float: right;
}
</style>